<!DOCTYPE html>
<html>
  <head>
    <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
    <base href="$FLUTTER_BASE_HREF" />

    <meta charset="UTF-8" />
    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
    <meta
      name="description"
      content="Powerful, minimalistic, cross-platform, opensource note-taking app"
    />

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="Butterfly" />
    <link
      rel="apple-touch-icon"
      href="android/android-launchericon-192-192.png"
    />

    <!-- Favicon -->
    <link
      href="windows11/Square44x44Logo.targetsize-16.png"
      rel="icon"
      type="image/png"
    />

    <title>Linwood Butterfly Nightly</title>
    <link rel="manifest" href="manifest.json" />
    <style id="splash-screen-style">
      .flutter-loader {
        z-index: 999999;
      }

      #splash {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 999998;
        opacity: 1;
        /* animation type and duration */
        transition: opacity 0.25s;
        background-color: #fafafa;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
      }

      #splash.remove {
        /* enable click through when run animation */
        pointer-events: none;
        /* start animation */
        opacity: 0;
      }

      #splash .center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #splash .contain {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      #splash .stretch {
        display: block;
        width: 100%;
        height: 100%;
      }

      #splash .cover {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      #splash .bottom {
        position: absolute;
        bottom: 0;
        left: 50%;
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
      }

      #splash .bottomLeft {
        position: absolute;
        bottom: 0;
        left: 0;
      }

      #splash .bottomRight {
        position: absolute;
        bottom: 0;
        right: 0;
      }

      @media (prefers-color-scheme: dark) {
        #splash {
          background-color: #353535;
        }
      }
    </style>
    <script id="splash-screen-script">
      function removeSplashFromWeb() {
        const splashElement = document.getElementById("splash");
        splashElement?.classList.add("remove");
        setTimeout(function () {
          splashElement?.remove();
          document.getElementById("splash-screen-script")?.remove();
        }, 750 /* animation time + wait rendering and others(500ms) */);
      }
    </script>
  </head>
  <body>
    <div id="splash">
      <picture>
        <source
          srcset="
            splash/img/light-1x.png 1x,
            splash/img/light-2x.png 2x,
            splash/img/light-3x.png 3x,
            splash/img/light-4x.png 4x
          "
          media="(prefers-color-scheme: light)"
        />
        <source
          srcset="
            splash/img/dark-1x.png 1x,
            splash/img/dark-2x.png 2x,
            splash/img/dark-3x.png 3x,
            splash/img/dark-4x.png 4x
          "
          media="(prefers-color-scheme: dark)"
        />
        <img
          class="center"
          aria-hidden="true"
          src="splash/img/light-1x.png"
          alt=""
        />
      </picture>
    </div>
    <script>
      // Prevent default browser behaviors

      document.addEventListener(
        "wheel",
        (e) => e.ctrlKey && e.preventDefault(),
        { passive: false }
      );
      window.addEventListener("keydown", function (event) {
        if (event.metaKey || event.ctrlKey) {
          // When ctrl or meta is pressed we want to suppress some default bound
          // browser actions (like CMD+Plus/Minus to zoom).
          switch (event.keyCode) {
            case 78: // 'n' for new
            case 68: // 'd' for duplication
            case 71: // 'g' for grouping
            case 187: // '=' for zoom in
            case 189: // '-' for zoom out
            case 90: // 'z' for preventing opening a previous tab in Safari
            case 221: // ']' for changing draw order
            case 219: // '[' for changing draw order
            case 37: // left arrow for moving keys: #1786
            case 39: // right arrow for moving keys: #1786
            case 188: // , #1835
            case 65:
              // Needs to be removed as it kills text copy
              // case 67:  // 'c' for preventing negative beep on Safari
              event.preventDefault();
              break;
            // default:
            //   console.log('Keycode pressed: ' + event.keyCode);
          }
        }
        // Suppress backspace triggering a navigated back action.
        if (event.keyCode === 8 && event.target === document.body) {
          event.preventDefault();
        }
      });
    </script>
    <script src="flutter_bootstrap.js" async></script>
  </body>
</html>
